import React, { useState, useEffect,useRef } from "react";
import './index.scss'
import LlxTable from 'components/LlxTable'
import LlxForm from 'components/LlxForm/index'
import { Form ,Button,notification,Select,Divider,Cascader,DatePicker,Tag,Modal,message} from 'antd';
import { connect } from 'react-redux'
import {setPageData,addHistoryRouter,setDictionaries} from 'redux/action'
import PreviewWordSubject from 'components/LlxPreview/afterPreview'
import { Menu, Dropdown, Space , Tooltip,Image} from 'antd';
import { DownOutlined ,ExclamationCircleOutlined} from '@ant-design/icons'

import {Pagingquerylearningvideos,Pagingquerylearningvideosflow,Batchapprovaloflearningvideos,bulkediting,pushPool,updateUpperLowerBatchLeVideo,Importvideo} from 'api/index'
import classNames from "classnames";

// 新增弹框 
import AddStudyVideo from 'components/LlxPushData/video'

import TaskAllocation from "components/Operations/task";

import ChangeStatus from "components/Operations/status";

const { RangePicker } = DatePicker;
const { SHOW_CHILD } = Cascader;
const { confirm } = Modal;

const getTimes = (value) => {
  switch (value) {
    case 308:
      return 0
    case 309:
      return 300
    case 310:
      return 600
    case 311:
      return 900
    default:
    return ''
  }
}
const getTimesEnd = (value) => {
  switch (value) {
    case 308:
      return 300
    case 309:
      return 600
    case 310:
      return 900
    case 311:
      return ''
      default:
    return ''
  }
}


function VideoLibrary(props) {
const {dictionaries} = props
// 数据
const [loading,setLoading] = useState(false) //加载
const [id,setId] = useState('') //加载
const [expand,setExpand] = useState(false) //表单伸缩
const [total,setTotal] = useState(0) //总数量
const [previewStudy, setPreviewStudy] = useState(false)
const [isModalVisible, setIsModalVisible] = useState(false)
const [isModalVisibleTask, setIsModalVisibleTask] = useState(false)
const [isModalVisibleStatus, setIsModalVisibleStatus] = useState(false)
const [selectData, setSelectData] = useState([])
const [form] = Form.useForm();//搜索列表

//选择数据
const [selectedRowKeys,setselectedRowKeys] = useState([])
const rowSelection  = useRef({
  selectedRowKeys: selectedRowKeys,
  onChange: value => {
  setselectedRowKeys(value)
  rowSelection.current.selectedRowKeys = value
  }
})

// 表单数据
const formItem = !props.examineStatus?[
  {label: '名称',type:'input', name: 'videoName', span: 4 },
  {label: '状态', name: 'videoStatus', span: 5 ,render: () => {
    return <Select
    allowClear
    optionFilterProp="dictValue"
    showSearch
    fieldNames={{value:'dictValue',label:'dictValue'}}
    placeholder={'请选择状态'}
    options={dictionaries.wordStatus}
  >
  </Select>
}},
  {label: '空值', name: 'isNull' , span: 5,render: () => {
    return <Select
    allowClear
    optionFilterProp="dictValue"
    showSearch
    fieldNames={{value:'id',label:'dictValue'}}
    placeholder={'请选择空值'}
    options={dictionaries.AvInfoIsNull}
  >
  </Select>
} },
{label: '标签', name: 'label' , span: 5,render: () => {
  return <Cascader  maxTagCount="responsive" showCheckedStrategy={SHOW_CHILD} fieldNames={{value:'id',label:'labelName'}} options={dictionaries.Label} multiple placeholder="请选择标签" />
} },
{label: '适合年纪', name: 'ageId' , span: 5,render: () => {
  return <Select
  allowClear
  optionFilterProp="dictValue"
  showSearch
  fieldNames={{value:'id',label:'dictValue'}}
  placeholder={'请选择适合年纪'}
  options={dictionaries.AgeRange}
>
</Select>
} },
{label: '主题', name: 'theme' , span: 4,render: () => {
  return <Select
  allowClear
  optionFilterProp="dictValue"
  showSearch
  maxTagCount={1}
  fieldNames={{value:'id',label:'dictValue'}}
  placeholder={'请选择主题'}
  mode="multiple"
  options={dictionaries.Theme}
>
</Select>
} },
 
{label: '发行方',type:'input', name: 'publisher', span: 5 },
{label: '学习视频简介',type:'input', name: 'remark', span: 5 },
{label: '配音', name: 'dub', span: 5 ,render:()=>{
  return <Select
  allowClear
  optionFilterProp="dictValue"
  showSearch
  maxTagCount={1}
  fieldNames={{value:'id',label:'dictValue'}}
  placeholder={'请选择配音'}
  options={dictionaries.isDub}
>
</Select>
}},
{label: '字幕内嵌', name: 'captionInId', span: 5 ,render:()=>{
  return <Select
  allowClear
  optionFilterProp="dictValue"
  showSearch
  maxTagCount={1}
  fieldNames={{value:'id',label:'dictValue'}}
  placeholder={'请选择幕内嵌'}
  options={dictionaries.CaptionIn}
>
</Select>
}},
{label: '学习视频类型', name: 'videoCategoryId' , span: 4,render: () => {
  return <Select
  allowClear
  optionFilterProp="dictValue"
  showSearch
  fieldNames={{value:'id',label:'dictValue'}}
  placeholder={'请选择类型'}
  options={dictionaries.AVType}
>
</Select>
} },
{label: '学习视频系列', name: 'avSerialId' , span: 5,render: () => {
  return <Select
  allowClear
  optionFilterProp="dictValue"
  showSearch
  fieldNames={{value:'id',label:'dictValue'}}
  placeholder={'请选择系列'}
  options={dictionaries.AvSerial}
>
</Select>
} },
{label: '学习视频时长', name: 'videoTime' , span: 5,render: () => {
  return <Select
  allowClear
  optionFilterProp="dictValue"
  showSearch
  fieldNames={{value:'id',label:'dictValue'}}
  placeholder={'请选择时长'}
  options={dictionaries.Duration}
>
</Select>
} },

  {label: '创建人', name: 'createBy',  span: 5 ,render: () => {
    return <Select
    allowClear
    optionFilterProp="userName"
    showSearch
    fieldNames={{value:'userName',label:'userName'}}
    placeholder={'请选择创建人'}
    options={dictionaries.UserSpecies}
  >
  </Select>
}},
  {label: '负责人', name: 'manager',  span: 5 ,render: () => {
    return <Select
    allowClear
    optionFilterProp="userName"
    showSearch
    fieldNames={{value:'userName',label:'userName'}}
    placeholder={'请选择负责人'}
    options={dictionaries.UserSpecies}
  >
  </Select>
}},
  {label: '更新人', name: 'updateBy',  span: 4 ,render: () => {
    return <Select
    allowClear
    optionFilterProp="userName"
    showSearch
    fieldNames={{value:'userName',label:'userName'}}
    placeholder={'请选择更新人'}
    options={dictionaries.UserSpecies}
  >
  </Select>
}},

  {label: '更新时间', name: 'updateTime', span: 8 ,render: () => {
    return  <RangePicker showTime onChange={getUpdateTime} style={{width:'100%'}}/>
}}
]:[
  {label: '名称',type:'input', name: 'videoName', span: 4 },
  {label: '上下架', name: 'shelf', span: 5 ,render: () => {
    return <Select
    allowClear
    optionFilterProp="id"
    showSearch
    fieldNames={{value:'id',label:'dictValue'}}
    placeholder={'请选择上下架状态'}
    options={dictionaries.Publish}
  >
  </Select>
}},
  {label: '空值', name: 'isNull' , span: 5,render: () => {
    return <Select
    allowClear
    optionFilterProp="dictValue"
    showSearch
    fieldNames={{value:'id',label:'dictValue'}}
    placeholder={'请选择空值'}
    options={dictionaries.AvInfoIsNull}
  >
  </Select>
} },
{label: '标签', name: 'label' , span: 5,render: () => {
  return <Cascader  maxTagCount="responsive" showCheckedStrategy={SHOW_CHILD} fieldNames={{value:'id',label:'labelName'}} options={dictionaries.Label} multiple placeholder="请选择标签" />
} },
{label: '适合年纪', name: 'ageId' , span: 5,render: () => {
  return <Select
  allowClear
  optionFilterProp="dictValue"
  showSearch
  fieldNames={{value:'id',label:'dictValue'}}
  placeholder={'请选择适合年纪'}
  options={dictionaries.AgeRange}
>
</Select>
} },
{label: '主题', name: 'theme' , span: 4,render: () => {
  return <Select
  allowClear
  maxTagCount={1}
  optionFilterProp="dictValue"
  showSearch
  mode="multiple"
  fieldNames={{value:'id',label:'dictValue'}}
  placeholder={'请选择主题'}
  options={dictionaries.Theme}
>
</Select>
} },
 
{label: '发行方',type:'input', name: 'publisher', span: 5 },
{label: '学习视频简介',type:'input', name: 'remark', span: 5 },
{label: '配音', name: 'dub', span: 5 ,render:()=>{
  return <Select
  allowClear
  optionFilterProp="dictValue"
  showSearch
  maxTagCount={1}
  fieldNames={{value:'id',label:'dictValue'}}
  placeholder={'请选择配音'}
  options={dictionaries.isDub}
>
</Select>
}},
{label: '字幕内嵌', name: 'captionInId', span: 5 ,render:()=>{
  return <Select
  allowClear
  optionFilterProp="dictValue"
  showSearch
  maxTagCount={1}
  fieldNames={{value:'id',label:'dictValue'}}
  placeholder={'请选择幕内嵌'}
  options={dictionaries.CaptionIn}
>
</Select>
}},
{label: '学习视频类型', name: 'videoCategoryId' , span: 5,render: () => {
  return <Select
  allowClear
  optionFilterProp="dictValue"
  showSearch
  fieldNames={{value:'id',label:'dictValue'}}
  placeholder={'请选择类型'}
  options={dictionaries.AVType}
>
</Select>
} },
{label: '学习视频系列', name: 'avSerialId' , span: 5,render: () => {
  return <Select
  allowClear
  optionFilterProp="dictValue"
  showSearch
  fieldNames={{value:'id',label:'dictValue'}}
  placeholder={'请选择系列'}
  options={dictionaries.AvSerial}
>
</Select>
} },
{label: '学习视频时长', name: 'videoTime' , span: 4,render: () => {
  return <Select
  allowClear
  optionFilterProp="dictValue"
  showSearch
  fieldNames={{value:'id',label:'dictValue'}}
  placeholder={'请选择时长'}
  options={dictionaries.Duration}
>
</Select>
} },

  {label: '创建人', name: 'createBy',  span: 5,render: () => {
    return <Select
    allowClear
    optionFilterProp="userName"
    showSearch
    fieldNames={{value:'userName',label:'userName'}}
    placeholder={'请选择创建人'}
    options={dictionaries.UserSpecies}
  >
  </Select>
}},
  {label: '更新人', name: 'updateBy',  span: 5 ,render: () => {
    return <Select
    allowClear
    optionFilterProp="userName"
    showSearch
    fieldNames={{value:'userName',label:'userName'}}
    placeholder={'请选择更新人'}
    options={dictionaries.UserSpecies}
  >
  </Select>
}},

  {label: '更新时间', name: 'updateTime', span: 8 ,render: () => {
    return  <RangePicker showTime onChange={getUpdateTime} style={{width:'100%'}}/>
}}
]
//分页数据
const [pagination,setPagination] = useState({
  current:1,
  pageSize:20
})
//初始表格数据
const [dataSource,setDataSource] = useState([])
//表头配置信息
const columns = !props.examineStatus?[
      {title: '名称',fixed:'left', dataIndex: 'videoName',width:250, key: 'videoName', align: 'center',render: (text, record) => {
        return <div className="operate_link_group text-nowrap text-link" onClick={()=>goVideoInfo(record.id)}>
          {text}
       </div>
     }},
      {title: '状态', dataIndex: 'videoStatus',width:100, key: 'videoStatus', align: 'center'},
      {title: '封面', dataIndex: 'pictureUrl',width:150, key: 'pictureUrl', align: 'center',render:(text)=>{
        return  <div>
          {
            text?<Image
            width={60}
            src={text}
          />:''
          }
        </div>
      }},
      {title: '适合年纪', dataIndex: 'ageName',width:100, key: 'ageName', align: 'center'},
      {title: '发行方', dataIndex: 'publisher',width:150, key: 'publisher', align: 'center'},
      {title: '主题', dataIndex: 'themes',width:180, key: 'themes', align: 'center', render: (text, record) => {
        return <div className="operate_link_group text-nowrap">
         {record.themes?.map((i,j)=>{
           return   <Tooltip key={i.id} placement="top" title={text.map(i=>i.themeName).join(' ')}>
            {
              j<3?<Tag key={i.id} color="lime">{i.themeName}</Tag>:''
            }
             </Tooltip>
         })}
       </div>}
      },
      {title: '系列', dataIndex: 'serialName',width:150, key: 'serialName', align: 'center'},
      {title: '类型', dataIndex: 'videoCategoryName',width:150, key: 'videoCategoryName', align: 'center'},
      {title: '标签', dataIndex: 'labels', key: 'labels',width:180, align: 'center', render: (text, record) => {
       return <div className="operate_link_group text-nowrap">
        {record.labels?.map((i,j)=>{
          return   <Tooltip key={i.id} placement="top" title={text.map(i=>i.labelName).join(' ')}>
           {
             j<3?<Tag key={i.id} color="green">{i.labelName}</Tag>:''
           }
            </Tooltip>
        })}
      </div>
    }},
      {title: '创建人',width:120, dataIndex: 'createBy', key: 'createBy', align: 'center',render: (text, record) => {
        return <div className={classNames(props.userInfo.user.userName===text?'operate_link_group text-nowrap text-color-red':"operate_link_group text-nowrap")}>
          {text}
       </div>
     }},
      {title: '负责人',width:120, dataIndex: 'manager', key: 'manager', align: 'center', render: (text, record) => {
        return <div className={classNames((props.userInfo.user.userName===record.qmanager)||(props.userInfo.user.userName===record.rmanager)?'operate_link_group text-nowrap text-color-red':"operate_link_group text-nowrap")}>
        {record.qmanager||record.rmanager}
       </div>
     }},
      {title: '更新人',width:120, dataIndex: 'updateBy', key: 'updateBy', align: 'center',render: (text, record) => {
        return  <div className={classNames(props.userInfo.user.userName===text?'operate_link_group text-nowrap text-color-red':"operate_link_group text-nowrap")}>
        {text}
     </div>
     }},
      {title: '更新时间', dataIndex: 'updateTime', key: 'updateTime', align: 'center',width:180},
      {title: '操作', dataIndex: 'active', key: 'active', align: 'center',width:100,fixed:'right',render:(text,row)=>{
        return <div>
          <span className="text-link" onClick={()=>previewSubject(row)}>预览</span>
        </div>
      }},
]:[
  {title: '名称',fixed:'left', dataIndex: 'videoName',width:250, key: 'videoName', align: 'center',render: (text, record) => {
    return <div className="operate_link_group text-nowrap text-link" onClick={()=>goVideoInfo(record.id)}>
      {text}
   </div>
 }},
 {title: '上下架状态', dataIndex: 'upperLowerName', key: 'upperLowerName',width:100, align: 'center', render: (text, record) => {
  return <div className="operate_link_group text-nowrap">
      {
       text==='已上架'?<Tag  color="success">{text}</Tag>:<Tag  color="red">{text}</Tag>
      }
 </div>}},
  {title: '封面', dataIndex: 'pictureUrl',width:150, key: 'pictureUrl', align: 'center',render:(text)=>{
    return <div>
    {
      text?<Image
      width={60}
      src={text}
    />:''
    }
  </div>
  }},
  {title: '适合年纪', dataIndex: 'ageName',width:100, key: 'ageName', align: 'center'},
  {title: '发行方', dataIndex: 'publisher',width:150, key: 'publisher', align: 'center'},
  {title: '主题', dataIndex: 'themes',width:180, key: 'themes', align: 'center', render: (text, record) => {
    return <div className="operate_link_group text-nowrap">
     {record.themes?.map((i,j)=>{
       return   <Tooltip key={i.id} placement="top" title={text.map(i=>i.themeName).join(' ')}>
        {
          j<3?<Tag key={i.id} color="lime">{i.themeName}</Tag>:''
        }
         </Tooltip>
     })}
   </div>}
  },
  {title: '系列', dataIndex: 'serialName',width:150, key: 'serialName', align: 'center'},
  {title: '类型', dataIndex: 'videoCategoryName',width:150, key: 'videoCategoryName', align: 'center'},
  {title: '标签', dataIndex: 'labels', key: 'labels',width:180, align: 'center', render: (text, record) => {
   return <div className="operate_link_group text-nowrap">
    {record.labels?.map((i,j)=>{
      return   <Tooltip key={i.id} placement="top" title={text.map(i=>i.labelName).join(' ')}>
       {
         j<3?<Tag key={i.id} color="green">{i.labelName}</Tag>:''
       }
        </Tooltip>
    })}
  </div>
}},
  {title: '创建人',width:120, dataIndex: 'createBy', key: 'createBy', align: 'center',render: (text, record) => {
    return <div className={classNames(props.userInfo.user.userName===text?'operate_link_group text-nowrap text-color-red':"operate_link_group text-nowrap")}>
      {text}
   </div>
 }},
  {title: '更新人',width:120, dataIndex: 'updateBy', key: 'updateBy', align: 'center',render: (text, record) => {
    return  <div className={classNames(props.userInfo.user.userName===text?'operate_link_group text-nowrap text-color-red':"operate_link_group text-nowrap")}>
    {text}
 </div>
 }},
  {title: '更新时间', dataIndex: 'updateTime', key: 'updateTime', align: 'center',width:180},
  {title: '操作', dataIndex: 'active', key: 'active', align: 'center',width:100,fixed:'right',render:(text,row)=>{
    return <div>
      <span className="text-link" onClick={()=>previewSubject(row)}>预览</span>
    </div>
  }},
]



// 初始化
//1缓存页面数据 缓存表单数据
useEffect(()=>{
  form.setFieldsValue(props.tabList.filter(i=>i.url==='video/studyVideoLibrary')[0]?.data?.form)
  setPagination(props.tabList.filter(i=>i.url==='video/studyVideoLibrary')[0]?.data?.pagination||{
    current:1,
    pageSize:20
  })
  },[]) // eslint-disable-line react-hooks/exhaustive-deps


// 切换发布草稿素材
useEffect(()=>{
  // 获取数据
  getNewList()
},[props.examineStatus]) // eslint-disable-line react-hooks/exhaustive-deps

// 方法
// 1.获取数据
const getNewList=(value)=>{
  // 清空选中状态
   setselectedRowKeys(()=>[])
   rowSelection.current.selectedRowKeys=[]

   setLoading(true)

    const initialData = async () => {
      const params = form.getFieldValue()
      params.currPage=value&&value.pageSize?value.current:pagination.current
      params.pageSize=value&&value.pageSize?value.pageSize:pagination.pageSize
      params.labels = params.label?params.label.map(i=>{
        return {id:i[1]}
      }):[]
      params.themes = params.theme?params.theme.map(i=>{
        return {id:i}
      }):[]

      
      if(props.tabList.filter(i=>i.url==='video/studyVideoLibrary')[0]?.data?.pagination&&(props.tabList.filter(i=>i.url==='video/studyVideoLibrary')[0]?.data?.pagination.current!==1||props.tabList.filter(i=>i.url==='video/studyVideoLibrary')[0]?.data?.pagination.pageSize!==10)&&pagination.current===1&&pagination.pageSize===10){
        params.currPage=props.tabList.filter(i=>i.url==='video/studyVideoLibrary')[0]?.data?.pagination.current
        params.pageSize=props.tabList.filter(i=>i.url==='video/studyVideoLibrary')[0]?.data?.pagination.pageSize
      }

      const data = {
        pagination: value&&value.pageSize?value:pagination,
        form:form.getFieldValue()
     }
       props.setPageDataFn('video/studyVideoLibrary',data) 

      params.videoStartTime=getTimes(params.videoTime)
      params.videoEndTime=getTimesEnd(params.videoTime)

      if(!props.examineStatus){
      
        const res = await Pagingquerylearningvideosflow(params)
        const data = res.result.records || []

        setDataSource(data)
  
        setTotal(res.result.total)
      } else {
        if (params.shelf === 1) {
          params.upperLower = 1010
        } else if (params.shelf === 2) {
          params.upperLower = 1000
        } else {
          params.upperLower = ''
        }

        const res = await Pagingquerylearningvideos(params)
        const data = res.result.records || []
        
        setDataSource(data)
  
        setTotal(res.result.total)
      }
    

      setLoading(false)
    
    }
  
    initialData()
    }
 // 2.重置表单
 const resetForm=()=>{
   form.resetFields()
   setPagination({
    current:1,
    pageSize:20
  })
   getNewList()
 }
//  4.学习视频详情
const goVideoInfo = (id) => {
props.history.push('/view/video/studyInfo?id=' + id)
props.addRouter({
  menuName:'学习视频详情',url:'video/studyInfo?id=' + id 
})
}
//  5.新增学习视频
const addNewStudyVideo = () => {
  setIsModalVisible(true)
}
const returnSelect = async(value) =>{
 await Importvideo({
  parentVideoId:value
})
setIsModalVisible(false)

getNewList()

notification.success({
  message: '导入成功',
  description: '操作人：' + props.userInfo.user.userName,
  duration:1
});

}
//  6.更多操作
const moreOperation = (value) =>{
  // 判断是否选择了数据
  if(!selectedRowKeys.length){
    notification.warning({
      message: '请至少选择一项数据',
      duration:1.5
    });
    return
  }
  
  const data = dataSource.filter((i)=>selectedRowKeys.includes(i.id))

  setSelectData(dataSource.filter((i)=>selectedRowKeys.includes(i.id)))

  switch (value.key) {
    case 'taskOther':
    //  分配任务
    if(data.some(i=>i.videoStatus==='P')){
      notification.warning({
        message: '你的选择中含有已发布的数据，请重新选择',
        duration:1.5
      });
      return
    }
    setIsModalVisibleTask(true)
    break
    case 'statusCheck':
     //  修改状态
     setIsModalVisibleStatus(true)
    break
    case 'pushTestArea':
      //  添加到测试区
      confirm({
        title: '是否将选中的数据添加到测试区',
        icon: <ExclamationCircleOutlined />,
        onOk() {
         const http = async()=>{
          await pushPool({
            dataId: data.map(i => i.id),
            levelId: 255,
            poolId: 608,
            type: 'LE_VIDEO'
          })

          notification.success({
            message: '添加成功',
            duration:1.5
          });
            // 清空选中状态
          getNewList()
         }

         http()
        },
        onCancel() {
          // 取消
        },
      });
     break
     case 'upperAndLower': 
     // 判断选择的是否同一种数据
     const value = data[0].upperLower
     if (data.filter(i => i.upperLower !== value).length) {
      message.error('请选择同一状态的数据')
      return
    }
     // 上下架操作
     confirm({
      title: '你确定要选择上架或者下架嘛?',
      icon: <ExclamationCircleOutlined />,
      okText: '确定',
      cancelText: '取消',
     async onOk() {
        // 修改数据接口请求
         
        await updateUpperLowerBatchLeVideo({
          ids: data.map(i => i.id),
          upperLower: value === 1010 ? 1000 : 1010
        })
         
        getNewList()

        notification.success({
          message: '操作成功',
          description: '操作人：' + props.userInfo.user.userName,
          duration:1
        });
      },
      onCancel() {
      },
    });
    break
   default:
     return
  }
}
// 6.1.更多操作
const menu = (
 <Menu
    onClick={moreOperation}
    items={props.userBtnRole.includes('VIDEO_STUDY_BUTTON_ONE')?[
      {
        label: '任务分配',
        key: 'taskOther',
      },
      {
        label: '状态退回',
        key: 'statusCheck',
      },
      {
        label: '添加至测试区',
        key: 'pushTestArea',
      },
    ]:{
      label: '添加至测试区',
      key: 'pushTestArea',
    }}
  />
);
// 7.获取时间
const getUpdateTime = (value,dataString) => {
  const data = form.getFieldValue()
  data.startTime=dataString[0]
  data.endTime=dataString[1]
  form.setFieldsValue(data)
}
// 8.预览课后题
const previewSubject = (value) => {
  setId(value.id)
  setPreviewStudy(true)
}


return <div className="app-content animate__animated animate__fadeIn">
    {/* 表单 */}
    <LlxForm form={form} formItem={expand?formItem:formItem.filter((i,j)=>j<5)}/>
    {/* 操作按钮 */}
    <div className="operate-btn">
     <div>
       {
          !props.examineStatus ? <Button  onClick={addNewStudyVideo} type='primary' className='animate__animated animate__fadeInLeft'>新增</Button>:''
       }
       {
         !props.examineStatus ? <Dropdown overlay={menu}>
         <Button  className='animate__animated animate__fadeInLeft'>
           <Space>
            更多操作
           <DownOutlined />
          </Space>
        </Button>
       </Dropdown>:''
       }
       {
         props.examineStatus ? (
         <>
          <Button  onClick={()=>moreOperation({key:'upperAndLower'})} type='primary' className='animate__animated animate__fadeInLeft'>上下架</Button>
         </>
         ):''
       }
       </div>
       <div>
         <Button  onClick={getNewList} type='primary' className='animate__animated animate__fadeInRight'>查询</Button>
          <Button  type='primary' onClick={resetForm} className='animate__animated animate__fadeInRight'>重置</Button>
          <Button  type='link' onClick={()=>setExpand(i=>!i)} className='animate__animated animate__fadeInRight'>{expand?'收起':'展开'}</Button>
       </div>
    </div>

    <Divider />
    {/* 表格 */}
    <LlxTable
     loading={loading} 
     pagination={pagination}
     setPagination={setPagination}
     selectedRowShow={true}
     rowSelection={rowSelection.current}
     height={!expand?310:475}
     total={total}
     getNewList={getNewList}
     columns={columns}
     dataSource={dataSource}/>

     {/* 弹框 */}
     {/* 1.新增 */}
     <AddStudyVideo returnSelect={returnSelect} getNewList={getNewList} multipleType={false} title={'新增学习视频'} dictionaries={dictionaries} userName={props.userInfo.user.userName}  isModalVisible={isModalVisible} setIsModalVisible={setIsModalVisible}></AddStudyVideo>
     {/* 任务分配 */}
     <TaskAllocation  editHttp={bulkediting} type={'LE_VIDEO'} statusType={'videoStatus'}  userName={props.userInfo.user.userName} getNewList={getNewList} UserSpecies={dictionaries.UserSpecies} list={selectData} isModalVisible={isModalVisibleTask} setIsModalVisible={setIsModalVisibleTask} ></TaskAllocation>
     {/* 状态变更 */}
     <ChangeStatus http={Batchapprovaloflearningvideos} type={'LE_VIDEO'} statusType={'videoStatus'}  userName={props.userInfo.user.userName} getNewList={getNewList} labelOption={dictionaries.Label} list={selectData} isModalVisible={isModalVisibleStatus} setIsModalVisible={setIsModalVisibleStatus} ></ChangeStatus>

      {/* 预览学习视频 */}
      <PreviewWordSubject type={'study'} id={id} isModalVisible={previewStudy} setIsModalVisible={setPreviewStudy}></PreviewWordSubject>
  </div>
}

// 映射方法
const mapDispatchToProps = (dispatch) => {
  return {
    addRouter: (route) => dispatch(addHistoryRouter(route)),
    setPageDataFn: (url,data) => dispatch(setPageData(url,data)),
    setDictionaries: (url,data) => dispatch(setDictionaries(url,data))
  }
}

export default connect((state)=>{
  return {tabList:state.tabList,examineStatus:state.examineStatus,userInfo:state.userInfo,dictionaries:state.dictionaries,userBtnRole:state.userBtnRole}
},mapDispatchToProps)(VideoLibrary)
